<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :areas="treeAreas" :area-type="areaType" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
            <el-select style="margin-left: 20px;width: 110px" class="filter-item" clearable v-model="listQuery.unit" placeholder="单元号">
              <el-option
                v-for="item in units"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-input style="margin-left: 10px;width: 120px" class="filter-item" type="number" clearable v-model="listQuery.floor" placeholder="楼层"></el-input>
            <el-input style="margin-left: 10px;width: 120px" class="filter-item" type="number" clearable v-model="listQuery.room_number" placeholder="门牌号"></el-input>
            <el-input clearable style="margin-left: 10px;width: 140px" class="filter-item"
                      v-model="listQuery.device_number" placeholder="终端编号"></el-input>
            <el-button v-if="checkPermission('查询记录')" style="margin-left:40px" class="filter-item" type="primary" icon="el-icon-search"
                       @click="getDeviceCommands">
              查询
            </el-button>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              v-loading="listLoading"
              :data="list"
              ref="equipTable"
              border
              fit
              stripe
              highlight-current-row
              :row-style="{height:40+'px'}"
              :cell-style="{padding:0+'px'}"
              style="width: 100%;"
              height="700"
            >
              <el-table-column
                type="selection"
                width="40">
              </el-table-column>
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column label="原终端编号" align="center">
                <template slot-scope="{row}">
                  <span>{{ row.terminal_number }}</span>
                </template>
              </el-table-column>
              <el-table-column label="所属用户" align="center" width="400">
                <template slot-scope="{row}">
                  <span>{{ row.area_name}}</span>
                </template>
              </el-table-column>
              <el-table-column label="记录" align="center" width="80">
                <template slot-scope="{row}">
                  <span>{{ row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作人" align="center" width="80">
                <template slot-scope="{row}">
                  <span>{{ row.operator }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作时间" align="center">
                <template slot-scope="{row}">
                  <span>{{ formatDate(row.create_time) }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                        @pagination="getDeviceExchangeLog"/>
          </div>n
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree';
import Pagination from '@/components/Pagination';
import {commandLogs} from "@/api/device";
import {getAreaTree} from "@/api/area";
import {checkPermission} from "@/utils/permission";
import jsUtils from 'jutils-src'


export default {
  name: 'list',
  components: {areas, Pagination},
  data() {
    const validateArea = (rule, value, callback) => {
      if (this.temp.area_code == '') {
        callback(new Error('请选择楼栋'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      deviceLogs: [],
      listLoading: true,
      list: [],
      areaType: 2,
      workModels:[{name:'线断',value:1},{name:'检定模式',value:2},{name:'洗阀模式',value:3}],
      deviceVersions: [
        {label: "1.1", value: '1.1'}
      ],
      deviceSize: [15, 20, 25, 32, 40, 50, 65, 80, 100, 125, 150, 200, 250, 300],
      treeAreas:[],
      total: 0,
      listQuery: {
        area_code: '',
        device_number: '',
        class: '',
        unit:'',
        floor:'',
        room_number:'',
        page: 1,
        pageSize: 20,
      },
      units:['一单元','二单元','三单元','四单元','五单元','六单元','七单元','八单元','九单元','十单元'],
    };
  },
  created() {
    this.getDeviceExchangeLog()
    this.getAreaTree()
  },
  methods: {
    checkPermission,
    getAreaTree(){
      getAreaTree({type:2}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick: function (data) {
      if (this.listQuery.area_code != data.code) {
        this.listQuery.area_code = data.code
        this.getDeviceExchangeLog()
      }
    },
    getDeviceExchangeLog() {
      this.listLoading = true
      let queryData = Object.assign({},this.listQuery)
      queryData.device_size = queryData.device_size || 0
      commandLogs(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    formatCommand(row) {
      switch (row.command){
        case 1:
          return '时间校准'
        case 2:
          if(row.params.status == 1){
            return "开阀"
          }
          return '关阀'
        case 3:
          return '下线'
        case 4:
          return '上传频率调整'
        case 5:
          return '模式调整'
      }
    },
    formatParams(row){
      switch (row.command){
        case 1:
          return '-'
        case 2:
          return '-'
        case 4:
          return '频率:'+row.params.rate+'天;'+row.params.hour+':'+row.params.minite
        case 3:
          return '-'
        case 5:
          if(row.params.calibration === 1){
            return '检定模式'
          }
          if(row.params.upvalveopen === 1){
            return '线断'
          }
          if(row.params.zerocheck === 1){
            return '洗阀模式'
          }
          return '-'
      }
    },
    formatDate(dateStr) {
      const d = new Date(dateStr)
      if(d.getMilliseconds() === 0){
        return '-'
      }
      return jsUtils.formatDate(d,'YYYY-MM-DD HH:ii:ss')
    },
    formatStatus(status){
      switch (status){
        case 0:
          return '未执行'
        case 1:
          return '成功'
        case 2:
          return '失败'
        default:
          return '-'
      }

    },
    resetQueryParams() {
      this.listQuery = {
        id: 0,
        page: 1,
        pageSize: 20,
        name: ''
      }
    }
  }
}
</script>
